<template>
  <div class="login-holder">
    <div style="width:100%;">
      <el-row>
        <el-col :span="24">
          <div class="logo">随手递</div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="24">
          <div class="logo-desc">足不出户 买遍全城</div>
        </el-col>
      </el-row>
      <br><br><br>
      <el-row>
        <el-col :span="24">
          <el-form ref="loginUserForm" :model="loginUserForm">
            <el-form-item prop="user">
              <el-input size="large" type="text" v-model="loginUserForm.username" placeholder="用户名">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input size="large" type="password" v-model="loginUserForm.password" placeholder="密码">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%;" size="large" type="primary" @click="login">登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="float:left;" type="text" @click="gotoRegister">没有账号？前往注册</el-button>
              <el-button style="float:right;" type="text" @click="gotoHome">返回首页</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { ROUTENAME } from 'services/constConfig.js'
import userService from 'services/userService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  data() {
    return {
      loginUserForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    gotoHome() {
      this.$router.push({ path: ROUTENAME.HOME })
    },
    gotoRegister() {
      this.$router.push({ path: ROUTENAME.REGISTER })
    },
    ...mapActions({
      setNowUser: 'setNowUser'
    }),
    login() {
      userService.login(this.loginUserForm).then(response => {
        if (response.data.User === null || response.data.User === undefined) {
          notifyUtil.showError('登录失败', '用户名或密码错误')
        } else {
          let nowUser = response.data.User[0]
          if (nowUser.role === 2) {
            notifyUtil.showError('登录失败', '快递员无法在网页端登录')
          } else {
            this.setNowUser(nowUser)
            if (nowUser.role === 1) {
              this.$router.push({ path: ROUTENAME.SHOP })
            }
            if (nowUser.role === 0) {
              this.$router.push({ path: ROUTENAME.HOME })
            }
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.logo {
  font-size: 60px;
  color: #2d8cf0;
  border: 3px solid #2d8cf0;
  border-radius: 10px;
}
.logo-desc {
  font-size: 16px;
  color: #495060;
}
.login-holder {
  position: absolute;
  width: 300px;
  height: 400px;
  margin: auto 0;
  margin-top: -200px;
  margin-left: -150px;
  top: 50%;
  left: 50%;
  /* background: red; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-input {
  height: 80px;
  width: 100%;
  background: red;
  /* font-size: 20px; */
  /* line-height: 40px; */
}
.login-button {
  width: 100%;
  /* font-size: 20px; */
}
</style>
